import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Navigator, Image, Button, Block} from '@tarojs/components'
import {connect} from 'react-redux'
import {AtTabs, AtIcon, AtInput, AtForm} from 'taro-ui'
import Skeleton from 'taro-skeleton'
import {CityLocation, OrderItem} from '../../utils/server.interface'
import {http} from '../../utils/http'
import {
  GET_ORDER_LIST,
  ORDER_CANCEL,
  DEL_ORDER,
  UPDATE_TRANS_PRICE,
  TARO_ENV,
  TRANSFER_GET_POSTER, RESOURCE_URL
} from '../../constants/api'
import {user} from '../../utils/user.service'
import {payment} from '../../utils/payment.service'
import {getHeadTop, vcmonitor} from "../../utils/tools";
import SearchBar from "../components/header-bar/search-bar";
import {newHttp} from "../../utils/request";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {platform} from '../../utils/platform-settting.service'
import Float from "../../components/float/float";
import {getBdInfo} from "../../utils/getCommonData";
import './order.scss'

type PageStateProps = {
  location: CityLocation
}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
  isTransfer: boolean
  isTransferTip: boolean
  loadMoreStatus: "more" | "loading" | "noMore"
  curTabIndex: number
  transferForm: {
    name: string
    price: number
    item: any
    info: any
  }
  statusObj: any
  canRateAwemeOrdersList: any
  bdInfo: any
  orderList: OrderItem[]
  searchKey: string
  imgSrc: string
  searchBarTop: number
  showLoading: boolean
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Order {
  props: IProps
}

@connect(({location}) => ({
  location
}), (dispatch) => ({}))


class Order extends Component {
  state: PageState = {
    canRateAwemeOrdersList: [],
    bdInfo: false,
    transferForm: {
      name: '',
      item: '',
      price: 0,
      info: ''
    },
    statusObj: {
      '未使用': 'status-cla-used',
      '已取消': 'status-cla-completed',
      '代付款': 'status-cla-pay',
      '已完成': 'status-cla-completed',
      '已退款': 'status-cla-refund'
    },
    isTransfer: false,
    isTransferTip: false,
    loadMoreStatus: 'loading',
    curTabIndex: 0,
    orderList: [],
    searchKey: '',
    imgSrc: '',
    searchBarTop: 0,
    showLoading: true,
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      this.page++
      const orderList = await this.getData(this.page)
      const old = this.state.orderList
      if (orderList) {
        this.setState({orderList: [...old, ...orderList]})
      }
    }
  }

  tabClick(index) {
    try {
      Taro.showLoading({title: '加载中...'});
      this.page = 1
      Taro.setStorageSync('order-status', this.tabList[index].value)
      this.setState({curTabIndex: index, loadMoreStatus: 'loading', orderList: []}, async () => {
        const orderList = await this.getData(this.page)
        if (process.env.TARO_ENV === 'tt') {
          const orderIds = []
          orderList.map(item => {
            orderIds.push(item.order_num)
            item.refundTotalAmount = (Number(item.total_fee) * 100).toFixed(2)
          })
          tt.canRateAwemeOrders({
            orderIds,
            success: (e) => {
              this.setState({canRateAwemeOrdersList: e.result})
            }
          })
        }
        this.setState({orderList})
        Taro.hideLoading()
      })
    } catch (e) {
      Taro.hideLoading()
    }
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    vcmonitor(this)
    this.shareParams = await user.getSellerParams()
    const headTop: any = getHeadTop()
    const searchBarTop = headTop.statusBar > 20 ? (headTop.statusBar + headTop.top + 40) : (headTop.statusBar + headTop.top + 50)
    this.setState({searchBarTop, bdInfo: await getBdInfo()})
  }

  async componentDidShow() {
    Taro.setNavigationBarTitle({title: '订单列表'})
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 1500)
      return
    }
    const status = Taro.getStorageSync('order-status')
    let index = 0
    this.tabList.forEach((item, i) => {
      if (item.value === status) index = i
    })
    this.tabClick(index)
  }

  shareParams = ''
  page = 1
  tabList = [{title: '全部', value: -1}, {title: '待付款', value: 0}, {title: '待使用', value: 55}, {title: '已完成', value: 66}]

  async getData(page) {
    const index = this.state.curTabIndex
    const orderList = await newHttp.catchGet(GET_ORDER_LIST, {
      pageNumber: page,
      orderStatus: this.tabList[index].value,
      searchKeywords: this.state.searchKey
    })
    if (orderList && orderList.length >= 10) {
      this.setState({loadMoreStatus: 'more', showLoading: false})
    } else {
      this.setState({loadMoreStatus: 'noMore', showLoading: false})
    }
    return orderList
  }

  searchChange(value) {
    this.setState({searchKey: value})
  }

  onShareAppMessage() {
    const {transferForm} = this.state
    const {item} = transferForm
    let path = ''
    const title = platform.info.platformName
    const imageUrl = item.default_img_url
    switch (item.category) {
      case 1:
        path = `/common/scenic/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}` + `&sKey=${Taro.getStorageSync('sKey' || '')}`
        break
      case 2:
        path = `/common/hotel/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}` + `&sKey=${Taro.getStorageSync('sKey' || '')}`
        break
      case 3:
        path = `/common/tourist-line/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}` + `&sKey=${Taro.getStorageSync('sKey' || '')}`
        break
      case 4:
        path = `/common/product/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}` + `&sKey=${Taro.getStorageSync('sKey' || '')}`
        break
      default:
        path = `/common/limited/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}` + `&sKey=${Taro.getStorageSync('sKey' || '')}`
        break
    }
    this.setState({isTransfer: false, isTransferTip: false})
    return {title, path, imageUrl}
  }

  searchClear() {
    this.setState({searchKey: '', orderList: [], loadMoreStatus: 'loading'}, async () => {
      const orderList = await this.getData(this.page)
      this.setState({orderList})
    })
  }

  search() {
    this.page = 1
    this.setState({loadMoreStatus: 'loading', orderList: []}, async () => {
      const orderList = await this.getData(this.page)
      if (orderList) {
        this.setState({orderList})
      }
    })
  }

  fnGetArray(str) {
    str = str.replace("[", "");
    str = str.replace("]", "");

    return str.split(',')
  }

  async cancelOrder(item) {
    Taro.showLoading({title: '取消中...'})
    const that = this

    let ret = false
    if (item.id) {
      ret = await http.postCondition(ORDER_CANCEL, {oid: item.id})
    } else {
      ret = await http.postCondition(DEL_ORDER + item.order_num, {})
    }
    if (ret.isOk) {
      this.page = 1
      setTimeout(async function () {
        Taro.showToast({title: '操作成功！'})
        that.setState({loadMoreStatus: 'loading', orderList: []}, async () => {
          const orderList = await that.getData(that.page)
          that.setState({orderList})
        })
      }, 1000)
    }
    Taro.hideLoading()
  }

  async payOrder(item) {
    const ret = await payment.orderListPay(item.id ? item.id : 0, item.order_num)
    if (ret) {
      Taro.showToast({title: '支付成功！'})
      this.tabClick(1)
    }
  }

  toEvaluate(orderNum) {
    Taro.navigateTo({
      url: '/main/order/evaluation?orderNum=' + orderNum,
    })
  }

  evaluation(orderId) {
    tt.rateAwemeOrder({
      orderId
    })
  }

  transfer(item) {
    this.setState({isTransfer: true, transferForm: {name: item.product_name, price: item.total_fee, item: item}})
  }

  againBuy(item) {
    if (!item.buy_again_goods_uuid) {
      return Taro.showToast({title: '无效的参数', icon: 'none'})
    }
    if (item.seckill_id) {
      return Taro.navigateTo({
        url: `/common/seckill/detail?itemId=${item.goods_id}&seckill_id=${item.seckill_id}`
      })
    } else {
      if (item.category == 1) {
        return Taro.navigateTo({
          url: '/common/scenic/detail?itemId=' + item.buy_again_goods_uuid
        })
      } else if (item.category == 2) {
        return Taro.navigateTo({
          url: '/common/hotel/detail?itemId=' + item.buy_again_goods_uuid
        })
      } else if (item.category == 3) {
        return Taro.navigateTo({
          url: '/common/tourist-line/detail?itemId=' + item.buy_again_goods_uuid
        })
      } else if (item.category == 4) {
        return Taro.navigateTo({
          url: '/common/product/detail?itemId=' + item.buy_again_goods_uuid
        })
      } else if (item.category == 6) {
        return Taro.navigateTo({
          url: '/movie/index'
        })
      } else {
        return Taro.navigateTo({
          url: '/common/limited/detail?itemId=' + item.buy_again_goods_uuid
        })
      }
    }
  }

  jumpOther(nu) {
    if (process.env.TARO_ENV === 'h5') {
      window.location.href = `https://m.kuaidi100.com/result.jsp?nu=${nu}`
    } else {
      Taro.navigateToMiniProgram({
        appId: 'wx6885acbedba59c14',
        path: `pages/result/result?nu=${nu}`
      })
    }
  }

  priceChange(val) {
    const {transferForm} = this.state
    if (!val) {
      transferForm['price'] = 0
      this.setState({transferForm})
      return
    }
    transferForm['price'] = val
    this.setState({transferForm})
  }

  handleChange(val) {
    if (val) {
      const {transferForm} = this.state
      transferForm['price'] = (Number(transferForm['price']) + 0.01).toFixed(2)
      this.setState({transferForm})
    } else {
      const {transferForm} = this.state
      transferForm['price'] = (Number(transferForm['price']) - 0.01).toFixed(2)
      this.setState({transferForm})
    }
  }

  async transferHandler() {
    const {transferForm} = this.state
    const {item} = transferForm
    const ret = await newHttp.post(UPDATE_TRANS_PRICE + item.order_num, {trans_price: transferForm.price});
    if (ret) {
      const {transferForm} = this.state
      const {item} = transferForm
      let path = ''
      switch (item.category) {
        case 1:
          path = `/common/scenic/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}`
          break
        case 2:
          path = `/common/hotel/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}`
          break
        case 3:
          path = `/common/tourist-line/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}`
          break
        case 4:
          path = `/common/product/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}`
          break
        default:
          path = `/common/limited/detail?itemId=${item.main_goods_uuid}&orderNum=${item.order_num}&transPrice=${transferForm.price}&shareParams=${this.shareParams}`
          break
      }
      const ret = await newHttp.post(TRANSFER_GET_POSTER, {id: item.id, path});
      this.setState({isTransferTip: true, imgSrc: ret.data, isTransfer: false})
    }
  }

  imgClick() {
    Taro.preViewImage({
      current: this.state.imgSrc,
      urls: [this.state.imgSrc]
    })
  }

  jumpForm(item) {
    // after_sale_status: 6退货进度 其余退款信息
    Taro.navigateTo({url: '/main/order/aftersales/orderdetail?orderId=' + item.order_num + '&type=' + item.after_sale_status})
  }

  jumpLogistics(item) {
    Taro.navigateTo({url: '/main/order/aftersales/logistics?orderId=' + item.id + '&orderNum=' + item.order_num})
  }

  // 去预约
  goAppointment(id, uuid, goodsUuid, appointmentId) {
    Taro.navigateTo({
      url: `/main/order/appointmentMake?id=${id}&uuid=${uuid}&goodsUuid=${goodsUuid}&appointmentId=${appointmentId}`
    });
  }

  // 查看预约
  ViewAppointment(order_uuid, appointmentId) {
    Taro.navigateTo({
      url: `/main/order/appointmentDetail?uuid=${order_uuid}&appointmentId=${appointmentId}`
    });
  }

  // 取消预约
  cancelAppointment(item) {
    Taro.navigateTo({
      url: `/main/order/appointmentCancel?uuid=${item.uuid}&reserve_id=${item.reserve_id}`
    });
  }

  globalData = Taro.getApp().globalData

  render() {
    const {
      isTransfer,
      isTransferTip,
      imgSrc,
      transferForm,
      searchBarTop,
      statusObj,
      curTabIndex,
      orderList,
      canRateAwemeOrdersList,
      bdInfo,
      searchKey,
      showLoading
    } = this.state
    return (
      <View className='order-warp-list-root'>
        <GzhAuth />
        {TARO_ENV === 'weapp' && !showLoading &&
          <View className='head-bg' style={`height: ${searchBarTop}Px;`}><SearchBar color='#333' value={searchKey}
            searchChange={this.searchChange.bind(this)}
            searchClear={this.searchClear.bind(this)}
            search={this.search.bind(this)}
          /></View>}
        {!showLoading && <AtTabs className='order-tabs' tabList={this.tabList} current={curTabIndex}
          onClick={this.tabClick.bind(this)}
        />}
        <Skeleton row={4} rowHeight={356} loading={showLoading}>
          <View>
            {orderList && orderList.map((item, index) => <View key={item.id} className='order-item'>
              {item.id ? <Navigator
                url={item.is_self_meal == 1 && item.childNum > 1 ? '/main/order/lianorder?parentOrderId=' + item.id : item.category == 6 ? '/main/order/Mdetail?orderId=' + item.id : item.childNum === 1 ? '/main/order/detail?orderId=' + item.childOrderId : '/main/order/detail?orderId=' + item.id}
              >
                  <View className={`head ${(process.env.P_ENV !== 'kd' && item.count_date) ? 'cancel-time-head' : ''}`}>
                    {(process.env.P_ENV !== 'kd' && item.count_date) &&
                      <View className='cancel-time'>
                        下单后超时将自动取消
                      </View>}
                    <View className={`status ${statusObj[item.status_name]}`}>{item.status_name}</View>
                  </View>
                  <View className='order-info'>
                    {!!item.group_activity_id && <View className='p-team'>拼团</View>}
                    <Image className='img' src={item.default_img_url} mode='aspectFill' lazyLoad />
                    <View className='name-box'>
                      <View className='name'>{item.is_meal === 1 &&
                        <Text style='color:red;'>[套餐]</Text>}{item.product_name}</View>
                      {/*{item.memo && <View className="valid-date">{item.memo}</View>}*/}
                      <View className='date'>{item.add_date}</View>
                      {!!item.site_name && <View className='date'>所属站点：{item.site_name}</View>}
                      {item.is_ticket_name && <View className='name-status'>{item.is_ticket_name}</View>}
                    </View>
                    <View className='order-info-right'>
                      <View className='order-info-num'>x{item.buy_amount}</View>
                      {item.pay_source_img && <Image className='order-info-from' src={item.pay_source_img} />}
                    </View>
                  </View>
                  <View className='total'>
                    <View className='title'>{process.env.TARO_ENV !== 'tt' && <Text decode> 出行人: {item.linkman} </Text>}</View>
                    <View className='price'><Text className='symbol'>￥</Text><View className='view-inline'><Float
                      value={item.total_fee}
                    /></View></View>
                  </View>
                  {item.after_sale_str && <View className='after_sale_str'>{item.after_sale_str}</View>}
                </Navigator>
                :
                <View>
                  <View className={`head ${(process.env.P_ENV !== 'kd' && item.count_date) ? 'cancel-time-head' : ''}`}>
                    {(process.env.P_ENV !== 'kd' && item.count_date) &&
                      <View className='cancel-time'>
                        下单后超时将自动取消
                      </View>}
                    <View className={`status ${statusObj[item.status_name]}`}>{item.status_name}</View>
                  </View>
                  <View className='order-info'>
                    {!!item.group_activity_id && <View className='p-team'>拼团</View>}
                    <Image className='img' src={item.default_img_url} mode='aspectFill' lazyLoad />
                    <View className='name-box'>
                      <View className='name'>{item.is_meal === 1 &&
                        <Text style='color:red;'>[套餐]</Text>}{item.product_name}</View>
                      {item.memo && <View className='valid-date'>{item.memo}</View>}
                      <View className='date'>{item.add_date}</View>
                      {item.site_name && <View className='date'>所属站点：{item.site_name}</View>}
                    </View>
                    <View className='order-info-right'>
                      <View className='order-info-num'>x{item.buy_amount}</View>
                      {item.pay_source_img && <Image className='order-info-from' src={item.pay_source_img} />}
                    </View>
                  </View>
                  <View className='total'>
                    <View className='title'><Text decode /></View>
                    <View className='price'><Text className='symbol'>￥</Text><View className='view-inline'><Float
                      value={item.total_fee}
                    /></View></View>
                  </View>
                  {item.after_sale_str && <View className='after_sale_str'>{item.after_sale_str}</View>}
                </View>
              }
              <View className='btn-box' style={`${item.status === 99 && 'border-top:none;'}`}>
                <View className='btn-item-box'>
                  {process.env.TARO_ENV !== 'tt' && <Block>
                    {!!item.ticket_library_type && item.ticket_library_type == 1 && <Navigator className='btn-item primary_red'
                      url={`/other/appointment/exchangeCode?uuid=${item.uuid}`}
                    >兑换</Navigator>}
                    {item.express_no && <View onClick={this.jumpOther.bind(this, item.express_no)}
                      className='btn-item primary_red'
                    >查看物流</View>}
                    {/*openType='redirect'  在当前页打开,不对的会导致好多东西共用了*/}
                    {(item.reserve_status == 2 || item.reserve_status == 3) &&
                      <Navigator url='/other/appointment/my' className='btn-item primary_red'>预约查看</Navigator>}
                    {process.env.TARO_ENV !== 'tt' && !!item.is_invoice && item.is_open_invoice === '0' &&
                      <Navigator className='btn-item primary_red'
                        url={`/main/order/invoice/invoice?orderNum=${item.order_num}`}
                      >申请开票</Navigator>}
                    {process.env.TARO_ENV !== 'tt' && item.is_open_invoice === '1' &&
                      <Navigator className='btn-item primary_red'
                        url={`/main/order/invoice/invoice-detail?orderNum=${item.order_num}`}
                      >查看开票</Navigator>}
                    {(item.reserve_status == 1 || item.reserve_status == 2) && (item.status == 1 || item.status == 2) &&
                      <Navigator className='btn-item primary_red'
                        url={!item.blank_page ? `/other/appointment/order?itemId=${item.appointmentId}&orderUUID=${item.uuid}` : '/other/appointment/empty'}
                      >预约</Navigator>}
                    {item.status == 0 &&
                      <View className='btn-item primary_red' onClick={this.cancelOrder.bind(this, item)}>取消</View>}
                    {item.status == 0 &&
                      <View className='btn-item primary_red' onClick={this.payOrder.bind(this, item)}
                        style={`color:#fff;border: 1px solid ${process.env.mainColor} !important;background-color:${process.env.mainColor}`}
                      >去支付</View>}
                    {item.buy_again &&
                      <View className='btn-item primary_red' onClick={this.againBuy.bind(this, item)}>再次购买</View>}
                    {process.env.IS_SHOW_GROUP_ACTIVITY && !!item.group_activity_id && item.status_name !== '已取消' && item.status_name !== '已退款' &&
                      <View className='btn-item primary_red' onClick={() => {
                        Taro.navigateTo({url: `/common/group/detail?orderNum=${item.order_num}&category=${item.category || 0}`})
                      }}
                      >查看我的团</View>}
                    {item.can_user_evaluation && <View className='btn-item to-evaluate'
                      style={`color:#fff;border: 1px solid ${process.env.mainColor} !important;background-color:${process.env.mainColor}`}
                      onClick={this.toEvaluate.bind(this, item.order_num)}
                    >去评价</View>}
                    {item.can_trans == 1 && item.total_fee > 0 && item.status_name === '已完成' &&
                      <View className='btn-item to-evaluate' onClick={this.transfer.bind(this, item)}>转让给TA</View>}
                    {item.is_after_sale && item.is_after_sale === 1 &&
                      <View className='btn-item primary_red' onClick={this.jumpForm.bind(this, item)}>查看详情</View>}
                    {item.is_after_sale && item.is_after_sale === 1 && item.after_sale_status == 6 &&
                      <View className='btn-item primary_red'
                        onClick={this.jumpLogistics.bind(this, item)}
                      >物流单号</View>
                    }
                  </Block>}
                  {
                    process.env.TARO_ENV === 'tt' && <Block>
                      {canRateAwemeOrdersList && canRateAwemeOrdersList.length > 0 && canRateAwemeOrdersList[index] && <View
                        className='operation'
                      >
                        <View className='operation-btn' onClick={this.evaluation.bind(this, item['order_num'])}>去评价</View>
                      </View>}
                      {item.order_num && item.status === 0 && this.globalData.canShowPayButton && <zijie-pay-button
                        mode={1}
                        refund-id={item.order_num}
                        order-status={0}
                      />}
                      {item.canRefund && bdInfo.type == 0 && <View className='operation'>
                        <zijie-pay-button
                          mode={1}
                          refund-id={item.order_num}
                          refund-total-amount={item.refundTotalAmount}
                          order-status={1}
                        />
                      </View>}
                      {item.status === 90 && this.globalData.canShowPayButton && (item.refund_no || bdInfo.type == 0) && <View className='operation'>
                        <zijie-pay-button
                          mode={1}
                          refund-id={item.refund_no}
                          order-status={2}
                        />
                      </View>}
                      {item.status === 4 && this.globalData.canShowPayButton && (item.refund_no || bdInfo.type == 0) && <View className='operation'>
                        <zijie-pay-button
                          mode={1}
                          refund-id={item.refund_no}
                          order-status={3}
                        />
                      </View>}
                      {item.refund_status === 5 && this.globalData.canShowPayButton && (item.refund_no || bdInfo.type == 0) && <View className='operation'>
                        <zijie-pay-button
                          mode={1}
                          refund-id={item.refund_no}
                          order-status={4}
                        />
                      </View>}
                      {/* 取消完成 */}
                      {(item.buy_again || item.dealStatus === 3) && <View className='operation'>
                        <View className='operation-btn' onClick={this.againBuy.bind(this, item)}>再次购买</View>
                      </View>}
                      {/* 1: 待预约, 0: 预约中, 1: 预约成功, 2: 预约失败, 3: 取消预约 */}
                      {item.order_type === 2 && (item.status === 1 || item.status === 2) && (item.dealStatus === -1 || item.dealStatus === 2) && <View
                        className='operation'
                      >
                        <View className='operation-btn'
                          onClick={this.goAppointment.bind(this,`${item.id}`, `${item.uuid}`, `${item.buy_again_goods_uuid}`, `${item.appointmentId}`)}
                        >去预约</View>
                      </View>}
                      {/* 已付款 & 已完成  预约中 / 预约成功 / 完成 */}
                      {item.order_type === 2 && (item.status === 1 || item.status === 2) && (item.dealStatus === 0 || item.dealStatus === 1) && <View
                        className='operation'
                      >
                        <View className='operation-btn'
                          onClick={this.ViewAppointment.bind(this, `${item.uuid}`, `${item.appointmentId}`)}
                        >查看预约单</View>
                      </View>}
                      {item.order_type === 2 && (item.status === 1 || item.status === 2) && (item.dealStatus === 0 || item.dealStatus === 1) && <View
                        className='operation'
                      >
                        {/* 预约中 / 成功 */}
                        <View className='operation-btn' onClick={this.cancelAppointment.bind(this, item)}>取消预约单</View>
                      </View>}
                    </Block>
                  }
                </View>
              </View>
              {item.appointment_msg &&
                <View className='sms'>请查收短信并点击链接进行预约，如未收到短信请及时联系商家。</View>}
            </View>)}
            {orderList.length <= 0 && <View className={`listNull ${TARO_ENV + 'listNull'}`}>
              <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
              <View className='text'>暂无订单信息</View>
            </View>}
          </View>
        </Skeleton>
        {isTransfer && <View className='transfer-model'>
          <View className='wrap'>
            <View className='box-wrap'>
              <View className='close-wrap'>
                <AtIcon value='close' size='14' color='#000' onClick={() => {
                  this.setState({isTransfer: false})
                }}
                />
              </View>
              <View className='header'>改价</View>
              <View className='body'>
                <View className='title'>{transferForm.name}</View>
                <View className='seller-price-box'>
                  <View className='seller-price'>销售价</View>
                  <View>
                    <AtForm className='at-input-number car-num-small2'>
                      <View onClick={this.handleChange.bind(this, 0)}
                        className={transferForm.price <= 0 ? "at-input-number__btn number--disabled" : "at-input-number__btn"}
                      ><AtIcon
                        value='subtract' size='12'
                      /></View>
                      <AtInput
                        type='digit'
                        value={transferForm.price}
                        onChange={this.priceChange.bind(this)}
                      />
                      <View onClick={this.handleChange.bind(this, 1)}
                        className={transferForm.price >= transferForm.item.total_fee ? "at-input-number__btn number--disabled" : "at-input-number__btn"}
                      ><AtIcon
                        value='add' size='12'
                      />
                      </View>
                    </AtForm>
                  </View>
                </View>
              </View>
              <View className='foot'>
                <View className='confirm' onClick={this.transferHandler.bind(this)}
                  style={`color:#fff;border: 1px solid ${process.env.mainColor} !important;background-color:${process.env.mainColor}`}
                >确定并转发</View>
              </View>
            </View>
          </View>
          <View className=' model-footer' onClick={() => this.setState({isTransfer: false})} />
        </View>}
        {isTransferTip && TARO_ENV !== 'h5' && <View className='transfer-model'>
          <View className='box-wrap'>
            <View className='alert'>
              <View className='flex'>确定进行转发吗？</View>
              <View className='space-around'>
                <View className='btnCommon' onClick={() => {
                  this.setState({isTransferTip: false})
                }}
                >取消</View>
                <View className='btnCommon success'>
                  <Button className='share-box' style={`color:${process.env.mainColor};`} openType='share'>
                    确定并转发
                  </Button>
                </View>
              </View>
            </View>
          </View>
          <View className='model-footer' onClick={() => this.setState({isTransferTip: false})} />
        </View>}
        {isTransferTip && TARO_ENV === 'h5' && <View className='share-poster'>
          <View className='share-poster-bg' onClick={() => this.setState({isTransferTip: false, imgSrc: ''})} />
          <View className='share-poster-container'>
            <View className='share-poster-body'>
              <View onClick={() => this.setState({isTransferTip: false, imgSrc: ''})} className='share-poster-close'>
                <AtIcon value='close-circle' size='24' color='#fff' />
              </View>
              <View onClick={this.imgClick.bind(this)}>
                <Image className='gzh-close-img'
                  src={imgSrc}
                  mode='widthFix'
                />
              </View>
              <View className='saveToPhoto-box'>
                <View className='saveToPhoto'>请长按图片保存至相册</View>
              </View>
            </View>
          </View>
        </View>}
      </View>
    )
  }
}

export default Order as ComponentClass<PageOwnProps, PageState>
